<template>
    <div class="flex flex-col h-full">
        <div class="headers__container">
            <div>
                <el-tooltip
                    v-if="value.share_status === 0"
                    effect="dark"
                    placement="top"
                    content="审核中: 审核通过后方可在广场中展示~">
                    <el-tag type="warning">分享审核中</el-tag>
                </el-tooltip>

                <el-tooltip
                    v-if="value.share_status === 2"
                    effect="dark"
                    placement="top"
                    :content="'分享被拒绝: '+value.share_result">
                    <el-tag type="danger">分享被拒绝</el-tag>
                </el-tooltip>
            </div>

            <div class="flex items-center gap-0.5">
                <el-popover
                    v-if="value.able_actions.length > 0"
                    placement="bottom"
                    :width="320"
                    effect="dark"
                >
                    <template #reference>
                        <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                            <img
                                class="w-4 h-4 object-contain"
                                :src="IconTools"
                                alt="调节"
                            />
                        </div>
                    </template>
                    <div class="py-2.5">
                        <div>
                            <span>放大图片</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'upscale1')">左上</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'upscale2')">右上</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'upscale3')">左下</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'upscale4')">右下</span>
                        </div>
                        <div class="mt-4">
                            <span>变体图片</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'variation1')">左上</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'variation2')">右上</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'variation3')">左下</span>
                            <span class="alter-btn" @click="handleMjEdit(value, 'variation4')">右下</span>
                        </div>
                    </div>
                </el-popover>
                <el-tooltip effect="dark" content="复制提示词" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconCopy"
                            alt="复制提示词"
                            @click="onCopy(value.prompt_eq)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip effect="dark" content="下载图片" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconDownload"
                            alt="下载图片"
                            @click="handleDownload(value)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip
                    effect="dark"
                    content="重新生成"
                    placement="top"
                >
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconReload"
                            alt="重新生成"
                            @click="handleReset(value)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip
                    v-if="value.engine === 'mj' && value?.able_cut"
                    effect="dark"
                    content="一键切图"
                    placement="top"
                >
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconCutout"
                            alt="一键切图"
                            @click="handleSplit(value)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip
                    effect="dark"
                    placement="top"
                    :content="value.share_status === -1
                        ? '分享至广场'
                        : (value.share_status === -2 ? '取消分享 (该分享被隐藏)' : '取消分享')"
                >
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            v-if="value.share_status === -1"
                            class="w-4 h-4 object-contain"
                            :src="IconShare"
                            alt="分享至广场"
                            @click="handleSquare(value)"
                        />
                        <img
                            v-else
                            class="w-4 h-4 object-contain"
                            :src="IconLink"
                            alt="取消分享"
                            @click="handleSquare(value)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconDelete"
                            alt="删除"
                            @click="handleDelete(value)"
                        />
                    </div>
                </el-tooltip>
            </div>
        </div>

        <div class="section__container">
            <Picture
                :lazy-img="value.thumbnail"
                :picture="value.image_loc || value.image_url"
                :loading="splitLoading"
            />
            <div class="masking">
                <el-popover
                    placement="bottom"
                    effect="dark"
                    trigger="hover"
                    :width="300"
                    :content="value.prompt_eq"
                >
                    <template #reference>
                        <p v-if="value.prompt_in" class="text-white">
                            {{ value.prompt_in }}
                        </p>
                    </template>
                </el-popover>
            </div>
        </div>

        <div class="footer__container mt-3">
            <div class="flex items-center justify-between">
                <div class="text-sm text-tx-placeholder">
                    {{ value.create_time }}
                </div>
                <div>
                    <el-tag v-if="value.type === 'text2img'">文生图</el-tag>
                    <el-tag v-if="value.type === 'img2img'">图生图</el-tag>
                    <el-tag v-if="value.type === 'upscale2img'">图放大</el-tag>
                    <el-tag v-if="value.type === 'variation2img'">图变换</el-tag>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'
import { generate, queryLists, resetFormData } from '../hooks/useDrawEffect'
import { useImageSplit } from '../hooks/useImageSplit'
import drawingApi from '~/api/apply/draws/drawing'
import downloadUtil from '~/utils/download'
import IconCopy from '~/assets/image/draw/icon_copy.png'
import IconLink from '~/assets/image/draw/icon_link.png'
import IconShare from '~/assets/image/draw/icon_share.png'
import IconTools from '~/assets/image/draw/icon_tools.png'
import IconCutout from '~/assets/image/draw/icon_cutout.png'
import IconReload from '~/assets/image/draw/icon_reload.png'
import IconDelete from '~/assets/image/draw/icon_delete.png'
import IconDownload from '~/assets/image/draw/icon_download.png'
import Picture from './picture.vue'

withDefaults(
    defineProps<{
        value: DrawsRecordResponse;
    }>(),
    {}
)

const { copy } = useClipboard()

// 切图状态
const splitLoading = ref<boolean>(false)

/**
 * 复制文字
 *
 * @param {string} content
 * @author zero
 */
const onCopy = async (content: string) => {
    await copy(content)
    feedback.msgSuccess('复制成功')
}

/**
 * Mj图片调整
 */
const handleMjEdit = (drawing: DrawsRecordResponse, action: string) => {
    const params = {
        api: 'mj',
        action: action,
        model: 'mj',
        image_id: drawing.image_id,
        image_ref: drawing.image_url,
        prompt_in: drawing.prompt_in,
        other_params: {
            mode: 'fast',
            style: '',
            quality: '1'
        },
        complex_params: {}
    }

    generate(params)
}

/**
 * 文件下载
 *
 * @param drawing
 * @author zero
 */
const handleDownload = async (drawing: DrawsRecordResponse) => {
    if (Array.isArray(drawing.image_loc)) {
        return feedback.msgError('切片后请右击保存图片～')
    }

    await feedback.confirm('确认要下载该图片吗？')
        .then(() => {
            downloadUtil.image(String(drawing.image_loc))
        }).catch(() => {})
}

/**
 * 一键切图
 *
 * @param drawing
 * @author zero
 */
const { images, splitImage } = useImageSplit()
const handleSplit = async (drawing: DrawsRecordResponse) => {
    if (splitLoading.value) {
        return
    }

    if (Array.isArray(drawing.image_loc)) {
        feedback.msgWarning('已经切片完成了～')
        return
    }

    await feedback.confirm('确认要进行切片吗？').then(async () => {
        splitLoading.value = true
        try {
            await splitImage(drawing.image_loc as string)
            drawing.image_url = images.value
        } catch (e) {
            feedback.msgError('Error: ' + e)
        } finally {
            splitLoading.value = false
        }
    }).catch(() => {})
}

/**
 * 重新生成
 *
 * @param drawing
 * @author zero
 */
const handleReset = async (drawing: DrawsRecordResponse) => {
    const params = {
        engine: drawing.engine,
        model: drawing.model,
        scale: drawing.scale,
        version: drawing.version,
        prompt_in: drawing.prompt_in,
        prompt_en: drawing.prompt_en,
        image_ref: drawing.image_ref,
        other_params: drawing.other_params
    }

    await resetFormData(params)
}

/**
 * 删除记录
 *
 * @param drawing
 * @author zero
 */
const handleDelete = async (drawing: DrawsRecordResponse) => {
    await feedback.confirm('确认要删除吗？')
        .then(async () => {
            await drawingApi.delete(drawing.code)
            await queryLists()
            feedback.msgSuccess('删除成功')
        }).catch(() => {})
}

/**
 * 广场公开
 *
 * @param drawing
 * @author zero
 */
const handleSquare = async (drawing: DrawsRecordResponse) => {
    if (drawing.share_status !== -1) {
        feedback.confirm('您确定要取消广场分享吗?')
            .then(async () => {
                await drawingApi.square(drawing.code)
                await queryLists()
                feedback.msgSuccess('取消成功')
            }).catch(() => {})
    } else {
        feedback.confirm('您确定要公开至广场吗?')
            .then(async () => {
                await drawingApi.square(drawing.code)
                await queryLists()
                feedback.msgSuccess('公开成功')
            }).catch(() => {})
    }
}
</script>

<style lang="scss" scoped>
.headers__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.section__container {
    position: relative;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    .masking {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 10px;
        background-color: rgb(0 0 0 / 50%);
        border-radius: 6px;
    }
}

.alter-btn {
    padding: 2px 12px;
    margin-left: 7px;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    background: #f2f3f6;
    border-radius: 4px;
    transition: all 0.3s;
    &:hover {
        color: var(--el-color-primary);
        background: var(--el-color-primary-light-8);
    }
}
</style>
